<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
    <!-- data与el的2种写法
        1.el有2种写法
                （1）.new Vue时候配置el属性。
                （2）.先创建Vue实例，随后再通过vm.$mount('.root')指定el的值。
        2.data有2种写法
                (1).对象式
                (2).函数式
                如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，
            否则会报错。
        3.一个重要的原则：
                由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例了。-->
<body>
    <div class="root">
        <h1>你好，{{name}}</h1> 

    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

    //  const vue=new Vue({
    //         el:'.root',      //第一种el的使用方式
    //         data:{
    //             name:'Vue'
    //         }
    //     })
    //     console.log(vue);
    //     vue.$mount(".root");    //第二种el使用方式

        new Vue({
            el:'.root',
            // data:{
            //     name:'Vue'      //第一种:对象式
            //  }

            data:function(){
                console.log('@@@@',this);       //函数式
                return{
                    name:"Vue"      //函数式
                }
            }
        })
    </script>
</body>
</html>